<template>
  <div>
    <el-card shadow="hover" style="border-radius: 30px;margin: 10px 10px 10px 10px;">
      <el-page-header @back="goBack" :content="content">
        <el-tag type="danger">{{ userName }}</el-tag>
      </el-page-header>
      <ul class="mainmenu" id="ul">
        <li><a href='#'><b>
          <el-button icon="el-icon-s-home" style="background-color: #36A1DB"></el-button>
        </b><span></span></a></li>
        <li><a href='#'><b>
          <el-button icon="el-icon-copy-document" style="background-color: #678ce1"></el-button>
        </b><span></span></a></li>
        <li><a href='#'><b>
          <el-button icon="el-icon-money" style="background-color: #8c67df;"></el-button>
        </b><span></span></a></li>
        <li><a href='#'><b>
          <el-button icon="el-icon-files" style="background-color: #84d018"></el-button>
        </b><span></span></a></li>
        <li><a href='#'><b>
          <el-button icon="el-icon-download" style="background-color: #14c760"></el-button>
        </b><span></span></a></li>
        <li><a href='#'><b>
          <el-button icon="el-icon-s-custom" style="background-color: #f3b613"></el-button>
        </b><span></span></a></li>
        <li><a href='#'><b>
          <el-button icon="el-icon-platform-eleme" style="background-color: #ff8a4a"></el-button>
        </b><span></span></a></li>
        <li><a href='#'><b>
          <el-button icon="el-icon-phone-outline" style="background-color: #fc5366"></el-button>
        </b><span></span></a></li>
        <li><a href='#'><b>
          <el-button icon="el-icon-chat-line-square" style="background-color: #36A1DB"></el-button>
        </b><span></span></a></li>
      </ul>
    </el-card>
  </div>
</template>

<script>
import {getUserModules} from "@/api/module/biz_user_module";
import $ from 'jquery'
import {guid} from "@/utils/guid";
import cryptoMd5 from "@/utils/md5"
import {encrypt, decrypt} from '@/utils/jsencrypt'

export default {
  name: "appIndex",
  data() {
    return {
      userName: null,
      content: "教学管理系统欢迎您："
    };
  },
  watch: {},
  created() {
    this.getAppUserToken();
  },
  methods: {
    goBack() {
      sessionStorage.removeItem("appUserToken")
      history.go(-1);
    },
    getAppUserToken: function () {
      const appUserToken = sessionStorage.getItem("appUserToken");
      if (!appUserToken) {
        this.$router.push({path: '/app'});
      } else {
        getUserModules(appUserToken).then(response => {
          response.data.forEach(function (item, index) {
            //item 就是当日按循环到的对象
            //index是循环的索引，从0开始
            if (item.userPassword) {
              item.userPassword = decrypt(item.userPassword);
            }
          });

          this.userName = response.data[0].appUserDisplayname;
          this.content += this.userName;

          for (let i = 0; i < response.data.length; i++) {
            const item = response.data[i];

            let a = $("#ul").children()[i].getElementsByTagName("a");
            let span = $(a).children()[1];
            span.innerText = item.moduleShortName;
            $(span).attr({style: "color:gray", id: item.moduleId});

            let baseAddress = item.moduleProtocol + "://" + item.moduleAddress + (item.modulePort ? (":" + item.modulePort) : "");

            $.ajax({
              url: baseAddress + item.moduleTodoAddress + "?logonName=" + item.userLogonname,
              success: function (result) {
                span.innerText = item.moduleShortName + "（" + result + "）";
              }
            });

            if (item.userLogonname) {
              $(span).attr({style: "color:lightgray"});
              $(a).bind("click", function () {
                // 创建Form
                let form = $('<form></form>');
                $(document.body).append(form);

                // 设置属性
                form.attr('action', baseAddress + item.moduleSsoAddress);
                form.attr('method', 'post');

                // form的target属性决定form在哪个页面提交
                // _self -> 当前页面 _blank -> 新页面
                form.attr('target', '_blank');

                // 创建Input
                let name = $('<input type="text" name="userName" />');
                let password = $('<input type="text" name="password" />');
                let salt = $('<input type="text" name="salt" />');
                name.attr('value', item.userLogonname);
                let saltVal = guid();
                let pwd = cryptoMd5.md5(item.userPassword + saltVal);
                password.attr('value', pwd);
                salt.attr('value', saltVal);

                // 附加到Form
                form.append(name);
                form.append(password);
                form.append(salt);

                // 提交表单
                form.submit();
                form.remove();

                // 注意return false取消链接的默认动作
                return false;
              });
            }
          }
        })
      }
    }
  }
}
</script>

<style scoped>
html, body {
  color: #222;
  font-family: Microsoft YaHei, Helvitica, Verdana, Tohoma, Arial, san-serif;
  margin: 0;
  padding: 0;
  text-decoration: none;
  background-color: #8cc8ff;
}

ul {
  list-style: none outside none;
  margin: 10px 0px 0 0;
  padding: 0;
}

body .mainmenu:after {
  clear: both;
  content: " ";
  display: block;
}

body .mainmenu li {
  float: left;
  margin-left: 2.5%;
  margin-top: 2.5%;
  width: 30%;
  border-radius: 5px 5px 5px 5px;
  height: 150px;
  overflow: hidden;
}

body .mainmenu li a {
  display: block;
  color: #FFF;
  text-align: center
}

body .mainmenu li a b {
  display: block;
  height: 80px;
}

body .mainmenu li a button {
  margin: 30px auto 0px;
  border: 0px;
  width: 70px;
  height: 50px;
  font-size: 50px;
}

body .mainmenu li a span {
  margin: 15px 0px 0px 20px;
  display: block;
  height: 30px;
  line-height: 30px;
  color: #000000;
  font-size: 14px;
}

body .mainmenu li:nth-child(8n+1) {
  background-color: #36A1DB
}

body .mainmenu li:nth-child(8n+2) {
  background-color: #678ce1
}

body .mainmenu li:nth-child(8n+3) {
  background-color: #8c67df
}

body .mainmenu li:nth-child(8n+4) {
  background-color: #84d018
}

body .mainmenu li:nth-child(8n+5) {
  background-color: #14c760
}

body .mainmenu li:nth-child(8n+6) {
  background-color: #f3b613
}

body .mainmenu li:nth-child(8n+7) {
  background-color: #ff8a4a
}

body .mainmenu li:nth-child(8n+8) {
  background-color: #fc5366
}

</style>
